<!-- 聊天记录 -->
<template>
  <div class="groupDialog_box">
    <el-tabs class="tab_box" v-model="active" @tab-click="handleClick">
      <el-tab-pane
        v-for="tab in tab_list"
        :label="tab.name"
        :name="tab.id"
        :key="tab.id"
      ></el-tab-pane>
    </el-tabs>
    <div class="tab_content">
      <template v-if="active === '0'">
        <chat-content :contentList="contentList"></chat-content>
      </template>
      <template v-else>
        <chat-file :contentList="contentList"></chat-file>
      </template>
    </div>
    <div class="pagination_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="10"
        :pager-count="5"
        small
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMessageFilePage, getMessagePage } from "@/api/chat"
import { timeFormat } from "@/utils/chat"
import chatContent from "./chatContent/content.vue"
import chatFile from "./chatContent/file.vue"

export default {
  components: { chatContent, chatFile },
  data() {
    return {
      active: "0",
      currentPage: 1,
      total: 0,
      contentList: [],
      timeFormat,
      // eslint-disable-next-line no-undef
      minioEndpoint_mini,
      tab_list: [
        {
          id: "0",
          name: "全部"
        },
        {
          id: "1",
          name: "文档"
        },
        {
          id: "2",
          name: "图片"
        },
        {
          id: "3",
          name: "视频"
        },
        {
          id: "4",
          name: "音频"
        },
        {
          id: "5",
          name: "其他"
        }
      ]
    }
  },

  created() {
    this.handleClick()
  },

  methods: {
    handleClick() {
      this.contentList = []
      let params = {
        receiverId: this.$store.state.receiverId,
        isGroup: this.$store.state.isGroup
      }
      if (this.active === "0") {
        this.getHistoryChatByText({
          pageNumber: this.currentPage,
          pageSize: 10,
          order: "sendTime|desc",
          filter: {
            ...params,
            content: ""
          }
        })
      } else {
        this.getHistoryChatByFile({
          pageNumber: this.currentPage,
          pageSize: 10,
          filter: {
            ...params,
            fileType: parseInt(this.active)
          }
        })
      }
    },
    async getHistoryChatByText(params) {
      const res = await getMessagePage(params)
      this.total = res.total
      this.contentList = res.data.records.map((item) => {
        return {
          ...item,
          downloadProcessNum: 0
        }
      })
    },
    async getHistoryChatByFile(params) {
      const res = await getMessageFilePage(params)
      this.total = res.total
      this.contentList = res.data.records.map((item) => {
        return {
          ...item,
          downloadProcessNum: 0
        }
      })
    },
    handleSizeChange() {},
    handleCurrentChange(page) {
      this.currentPage = page
      this.handleClick()
    }
  }
}
</script>
<style lang="less">
.groupDialog_box {
  width: 280px;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  .tab_box {
    .el-tabs__item {
      padding: 0 8px;
    }
    .el-tabs__header {
      margin: 0;
    }
  }
  .tab_content {
    flex: 1;
    overflow: auto;
    // padding: 10px;
  }
  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 8px;
  }
  .el-tabs--top .el-tabs__item.is-top:last-child {
    padding-right: 8px;
  }
  .pagination_box {
    height: 32px;
    .el-pagination__total {
      font-size: 12px;
      margin-right: 5px;
    }
  }
}
</style>
